<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.hezi {
				width: 500px;
				height: 500px;
				/*background-color: #fcfcfc;*/
				/*border: 1px solid;*/
				border: 1px solid;
				box-shadow: #ccc 2px 2px 2px;
				margin: 0 auto;
			}
			.hezi>div {
				padding-top: 20px;
			}
			.kuang {
				border: 0;
				border-bottom: 1px solid #aaa;
				/*outline: none;*/
			}
			span {
				display: inline-block;
				width: 100px;
				padding-left: 40px;
				text-align: right;
			}
			h1 {
				text-align: center;
			}
			.button {
				width: 140px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
		</style>
	</head>
	<body>
		<h1>表单</h1>
		<div class="hezi">
			<div>
				<span>用户名：</span>
				<input class="kuang" id="username" type="text" value="" placeholder="请输入用户名" />
				<input type="button" value="检验用户名是否合法"  />
			</div>
			<div><span>密码：</span><input class="kuang" id="password" type="password" /></div>
			<div><span>确认密码：</span><input class="kuang" id="rpassword" type="password" /></div>
			<div>
				<span>性别：</span>
				<input type="radio" name="sex" value="0" id="sexMale" />男
				<input type="radio" name="sex" value="1" id="sexFemale" />女
			</div>
			<div>
				<span>爱好：</span>
				<input type="checkbox" name="hobby" value="0" id="hobby0" />篮球
				<input type="checkbox" name="hobby" value="1" id="hobby1" />跑步
				<input type="checkbox" name="hobby" value="2" id="hobby2" />游泳
			</div>
			<div>
				<span>专业：</span>
				<select name="" id="subject">
					<option value="1">软件技术</option>
					<option value="2">计算机技术</option>
					<option value="3">网络技术</option>
				</select>
			</div>
			<div>
				<span>个人简介：</span>
				<textarea id="info"></textarea>
			</div>
			<div>
				<span>头像：</span>
				<input type="file" />
			</div>
			<div class="button">
				<input type="button" value="提交" onclick="getValue()" />
				<input type="button" value="重置" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function getValue(){
			let oUsername = document.getElementById('username')
			let oPassword = document.getElementById('password')
			let oRpassword = document.getElementById('rpassword')
			if(oUsername.value === ''){
				alert("请输入用户名")
				return
			}
			if(oPassword.value === ''){
				alert("请输入密码")
				return
			}
			if(oPassword.value !== oRpassword.value){
				alert("两次密码输入不一致")
				return
			}
//			let oSexMale = document.getElementById('sexMale')
//			let oSexFemale = document.getElementById('sexFemale')
			console.dir(oUsername.value)
			console.dir(oPassword.value)
//			if(oSexMale.checked)
//				console.log("性别：男")
//			if(oSexFemale.checked)
//				console.log("性别：女")
			let oSex = document.getElementsByName('sex')
			let sexValue = ''
			let map = new Map()
			map.set('0','男')
			map.set('1','女')
			for (var i = 0; i < oSex.length; i++){
				if(oSex[i].checked){
					sexValue = oSex[i].value
				}
			}
			if(sexValue.length === 0){
				console.log('未选中性别')
			} else{
				console.log(map.get(sexValue))
			}
			let oHobby  =document.getElementsByName('hobby')
			let hobbyValueList = []
			let map1 = new Map()
			map1.set('0','篮球')
			map1.set('1','跑步')
			map1.set('2','游泳')
			for (var i = 0; i < oHobby.length; i++){
				if(oHobby[i].checked){
					hobbyValueList.push(oHobby.value)
				}
			}
			if(hobbyValueList.length === 0){
				console.log('未选中爱好')
			} else{
				for (x in hobbyValueList){
					console.log(map1.get(x))
				}
			}
			let map2 = new Map()
			map2.set('1','软件技术')
			map2.set('2','计算机技术')
			map2.set('3','网络技术')
			//let oSubject = document.getElementById('subject')
			//console.dir(oSubject.options[0])
			let oSubject = document.getElementById('subject').value
			console.log(map2.get(oSubject))		
//			let oSelect = document.getElementById('subject');
//			let oOptions = oSelect.options
//			let selectedIndex = oSelect.selectedIndex
//			console.dir(oOptions[selectedIndex].value)
			let OMyInfo = document.getElementById('info')
		}
	</script>
</html>
